<template>
<el-card class="box-card">
<!--  卡片头部的父元素可以用flex布局，水平两端对齐，垂直居中对齐-->
  <div slot="header" style="display: flex;justify-content: space-between;align-items: center">
<!--    justify-content: space-between 沿水平方向两端对齐-->
<!--    align-items: center 垂直方向居中对齐-->
    <span>图书列表</span>
    <div>
      <el-input placeholder="输入书本名称" style="width: auto"/>
      <el-button type="primary">搜索</el-button>
    </div>
  </div>

  <div>
    <!-- 搜索的表单 :inline="true"表示表单水平排列 -->
    <el-form :inline="true" style="float: right">
      <el-form-item>
        <el-button type="primary" @click="edit">添加书籍</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" stripe border max-height="600" style="width: 100%">
      <el-table-column prop="id" label="书本编号" min-width="200"></el-table-column>
      <el-table-column prop="bookName" label="书本名称" min-width="200"></el-table-column>
      <el-table-column prop="writer" label="作者" min-width="200"></el-table-column>
      <el-table-column label="操作" min-width="300px">
        <template v-slot="scope">
          <el-button size="mini" >编辑</el-button>
          <el-button type="danger" size="mini">删除</el-button>
          <el-button type="success" v-if="scope.row.state==0" size="mini">租借</el-button>
          <el-button type="danger" v-if="scope.row.state==1" size="mini">归还</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</el-card>
</template>

<script>
import http from "../../../../springboot_parent/vue_03/src/api/http";
export default {
  name: "BookVue",
  data(){
    return {
      bookName:null,
      tableData:null,

    }
  },
  methods:{
    getBookList(){
      http.get('/book/checkBookList',{
        params:{
          bookName:this.bookName//将bookName带回后端去查找
        }
      }).then((response)=>{
        this.tableData=response.data
      })
    },
    edit(){
        this.$router.push('/edit')
    }
  },created() {
    this.getBookList()
  }
}
</script>

<style scoped>

</style>